import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import './App.css'
import React from 'react';
import { Breadcrumb, Button, Layout, Menu, theme } from 'antd';
// import { routerItem } from './router/Index';

const { Header, Content, Footer } = Layout;

const items = Array.from({ length: 3 }).map((_, index) => ({
  key: String(index + 1),
  label: `nav ${index + 1}`,
}));

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate=useNavigate()

  // const {pathname}=useLocation()
  // const handOk=(arr)=>{
  //   return arr.map((item)=>{
  //     return {
  //       key:item.path,
  //       label:item.title
  //     }
  //   })
  // }

  // const items=handOk(routerItem)

  //顶部布局
  return (
    <Layout>
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 1,
          width: '100%',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items}
          // onClick={({key})=>navigate(key)}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: '0 48px' }}>
        <Breadcrumb
          style={{ margin: '16px 0' }}
          items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
        />
        <div
          style={{
            padding: 24,
            minHeight: 680,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Button onClick={()=>navigate('/data')}>首页</Button>
          <Button onClick={()=>navigate('/ss')}>热搜</Button>
          <Button onClick={()=>navigate('/book')}>小说</Button>
          <Button onClick={()=>navigate('/look')}>电影</Button>
          <Button onClick={()=>navigate('/looks')}>电视剧</Button>
          <Outlet></Outlet>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  );
};

export default App;

